<template>
	<view>
		<u-loading-page :loading="loading" loading-text="加载中..."></u-loading-page>
		<cu-custom bgColor="bg-newblue" :isBack="true">
			<block slot="content">
				<text>选择赏品</text>
			</block>
		</cu-custom>

		<view class="box">
			<view class="one">
				<view class="one_left">
					已选<text>{{kind}}</text>种 已选 <text>{{num}}</text>个
				</view>
				<view class="one_right">
					<!-- <u-subsection :list="list" :current="curNow" @change="sectionChange"
						activeColor="#AEE2DA"></u-subsection> -->
				</view>
			</view>

			<view class="two">
				<!-- <view class="nomore" v-if="shoplist.length < 1" style="">
					
					<view class="">
						<image src="http://cdn.uviewui.com/uview/empty/data.png" mode="widthFix"></image>
					</view>
					暂无赏品
				</view> -->
				<view class="two_item" v-if="shoplist.length > 0">
					<block v-for="(item,index) in shoplist">
						<view class="cu-item shadow"
							:style="{border:item.checked == 1?'4px solid #f68c50':'4px solid #656447',}" style="position: relative;width: 29%;float: left;padding-bottom: 0rpx;
					margin: 10rpx;height: 310rpx;">
							<view class="image" style="width: 100%;" @click="chooseGood(index)">
								<image :src="item.adimage" mode="widthFix" style="min-height: 70px;"></image>
								<view class="cu-bar text-white bg-black"
									style="margin-top: -35%;display: block;line-height: 30upx;opacity: 0.7;">
									<view style="clear: both;"></view>
									<text class="text-sm"
										style="width: 100%;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;">
										{{item.name}}
									</text>
									<view style="clear: both;"></view>
									<text class="text-sm" style="width: 100%;" v-show="item.reword_type_name != 'S'">
										建议价:{{item.back_price}}
									</text>
									<text class="text-sm" style="width: 100%;" v-show="item.reword_type_name == 'S'">
										只可发货
									</text>
									<view style="clear: both;"></view>
									<text class="text-sm" style="width: 100%;">
										{{item.reword_type_name}}赏<text class="fr">{{item.num}}个</text>
									</text>
									<view style="clear: both;"></view>
								</view>
							</view>
							<view style="position: absolute;right: 5%;top: 0%;width: 35px;height: 35px;"
								@click="chooseGood(index)" v-if="item.state == 1">
								<image :src="Imgbase + '/1zhan_goodstate1.png'" mode="widthFix" style="width: 35px;height: 35px;">
								</image>
							</view>
							<view style="position: absolute;right: 5%;top: 0%;width: 30px;height: 30px;"
								@click="chooseGood(index)" v-if="item.state == 0">
								<image :src="Imgbase + '/1zhan_goodstate0.png'" mode="widthFix" style="width: 30px;height: 30px;">
								</image>
							</view>
							<view style="width: 90rpx;height: 90rpx;position: absolute;left: 0%;top: 0%;"
								@click="chooseGood(index)">
								<view :class="item.checked == 1?'fuxuankClicks':'fuxuank'"
									:checked="item.checked == 1?true:false">
									<image v-if="item.checked == 1" style="width: 100%;height: 100%;"
										:src="Imgbase + '/1zhan_ex_choose.png'" mode="aspectFit"></image>
									<!-- <text class="iconfont">&#xe615;</text> -->
								</view>
							</view>
							<u-number-box :v-model="item.value" :value="item.nums" @change="valChange" :name="index"
								integer @minus="changeNum" :max="item.num"></u-number-box>
						</view>
					</block>
				</view>

			</view>
		</view>

		<view class="hidden">
			<view class="all" @click="filling">
				一键填入
			</view>
			<view class="btn w-250 h-70" @click="gos">
				确定
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				Imgbase: getApp().globalData.Imgbase,
				list: [{
					name: '展开'
				}, {
					name: '堆叠'
				}],
				kind: 0,
				num: 0,
				page: 1,
				userbags: '',
				shoplist: [],
				onchoose: [],
				// value: 0,
				loading: true,
				numlist: [{
					"name": -1,
					"num": 0
				}],
				backoflist: [],
				fillingnum: 1,
				needmoney: 0
			};
		},
		onLoad(e) {
			this.needmoney = e.money
			console.log(e.money)
			if (e.data != undefined) {
				this.backoflist = JSON.parse(e.data)
			}

		},
		onShow() {
			this.userBag()
			setTimeout(() => {
				this.loading = false
			}, 2000)
		},
		onReachBottom() {
			this.page++;
			this.userBag()
		},
		methods: {
			filling() {
				let _this = this
				let num = 300
				let moneyd = this.needmoney
				let list = this.shoplist
				let nums = []
				// fillingnum单数为一键填入  偶数为取消一键填入
				if (this.fillingnum % 2 == 0) {
					// console.log(123123132)
					// this.shoplist
					list.forEach((e) => {
						e.checked = 0
						e.value = 1
					})
					_this.kind = 0
				} else {
					list.forEach((e) => {
						e.checked = 0
						e.value = 1
					})
					let kinds = 0

					for (let i = 0; i < list.length; i++) {
						if (moneyd == 0) {
							if (num - list[i].num > 0) {
								console.log(1)
								num = num - list[i].num
								list[i].value = list[i].num;
								list[i].checked = 1;
								nums.push({
									"id": list[i].goods_id
								})
							} else {
								list[nums.length].checked = 1;
								list[nums.length].num = num;
								list[nums.length].value = num;
								nums.push({
									"id": list[nums.length + 1].goods_id
								})
								_this.kind = nums.length
								break;
							}
						} else {
							if (moneyd - (list[i].back_price * list[i].num) > 0 && num - list[i].num > 0) {
								list[i].value = list[i].num;
								list[i].nums = (moneyd / list[i].back_price > 300) ? 300 : moneyd / list[i].back_price;
								list[i].checked = 1;
								nums.push({
									"id": list[i].goods_id
								})
								moneyd = moneyd - (list[i].back_price * list[i].num)
								num = num - list[i].num

							} else {
								list[i].nums = (moneyd / list[i].back_price > num) ? num : moneyd / list[i].back_price;
								list[i].value = (moneyd / list[i].back_price > num) ? num : moneyd / list[i].back_price;
								list[i].checked = 1;
								_this.kind = nums.length + 1
								nums.push({
									"id": list[i].goods_id
								})
								break
							}
						}


					}
					// console.log(moneyd)
				}

				_this.num = 0
				list.forEach((e) => {
					if (e.checked == 1) {
						_this.num += e.value
					}
				})
				this.fillingnum++
				// console.log(this.fillingnum)

			},
			changeNum(data) {
				// console.log('12312123')
				// console.log(data)

			},
			// 步进器
			valChange(e) {
				let _this = this
				if (this.shoplist[e.name].checked == 0) { // 未选中
					// console.log(this.kind, '11111')
					this.kind++
					// this.num++
				} else {
					// console.log(this.kind, '22222')
					// this.num--
				}
				if (e.value > 0) {
					this.shoplist[e.name].checked = 1;
					this.shoplist[e.name].value = e.value;
				} else {
					this.shoplist[e.name].checked = 0
				}
				_this.num = 0
				this.shoplist.forEach((e) => {
					if (e.checked == 1) {
						_this.num += e.value
					}
				})

			},
			// 选择赏品
			chooseGood(e) {
				let _this = this
				if (this.shoplist[e].checked == 0) {
					this.shoplist[e].checked = 1;
					this.kind++
				} else {
					this.shoplist[e].checked = 0
					this.kind--
				}
				_this.num = 0
				this.shoplist.forEach((e) => {
					if (e.checked == 1) {
						_this.num += e.value
					}
				})
			},
			// 确定按钮
			gos() {
				let _this = this
				_this.onchoose = []
				this.shoplist.forEach((e) => {
					if (e.checked == 1) {
						console.log(e)
						// let sss = e.ids.split(",")
						// console.log(sss.length)
						// console.log(sss.slice(0,(e.value * 2)))
						// console.log(e.ids.length)
						// console.log(e.ids.slice(1,e.value))

						_this.onchoose.push({
							'adimage': e.adimage,
							// "ids": sss.slice(0, e.value),
							"money": e.back_price,
							"num": e.value,
							"goods_id": e.goods_id
						})
					}
				})
				let num = 0
				let list = this.onchoose
				list.forEach((e) => {
					num += e.num
				})
				if (num > 300) {
					uni.showToast({
						icon: 'none',
						title: '您最大可选赏品数为300个'
					});
					return
				}
				if (_this.onchoose.length == 0) {
					uni.showToast({
						icon: 'none',
						title: '请选择赏品'
					});
					return
				}
				// this.ids = this.ids.slice(0, -1);
				uni.$emit('updateData', this.onchoose)
				uni.navigateBack({
					delta: 1
				})
				// console.log(this.ids)
			},
			userBag() {
				let _this = this
				uni.request({
					url: _this.$globals.apibase + '/api/Usersys/userBagByDuihuan',
					data: {
						token: uni.getStorageSync('token'),
						lock: 0
					},
					method: 'POST',
					header: {
						'content-type': 'application/json'
					},
					success: (res) => {
						if (res.data.code == '1') {
							if (res.data.data.list.length == 0) {
								uni.showToast({
									icon: 'none',
									title: '暂无赏品'
								});
							}
							for (let i = 0; i < res.data.data.list.length; i++) {
								res.data.data.list[i].checked = 0;
								res.data.data.list[i].value = res.data.data.list[i].num;
								res.data.data.list[i].nums = res.data.data.list[i].num;
								_this.shoplist = _this.shoplist.concat(res.data.data.list[i])
								_this.backoflist.forEach((e) => {
									if (res.data.data.list[i].goods_id == e.goods_id) {
										res.data.data.list[i].checked = 1
										res.data.data.list[i].value = e.num;
									}
								})
							}
							this.shoplist.forEach((e) => {
								if (e.checked == 1) {
									_this.num += e.value
									_this.kind++
								}
							})
							// backoflist

						}
					}
				});
			},

		},
	}
</script>

<style lang="scss">
	@font-face {
		font-family: 'iconfont';
		/* Project id 3013827 */
		src: url('http://at.alicdn.com/t/font_3013827_g983wuu6sca.woff2?t=1639636110951') format('woff2'),
			url('http://at.alicdn.com/t/font_3013827_g983wuu6sca.woff?t=1639636110951') format('woff'),
			url('http://at.alicdn.com/t/font_3013827_g983wuu6sca.ttf?t=1639636110951') format('truetype');
	}

	page {
		background-color: #fff;
	}

	.hidden {
		width: 100%;
		height: 100rpx;
		background-color: #fff;
		position: fixed;
		bottom: 0;
		left: 0;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 50rpx;
		z-index: 9999;

		.all {
			font-weight: bold;
		}

		.btn {
			text-align: center;
			line-height: 70rpx;
			background-color: #83e2bf;
			color: #fff;
			border-radius: 15rpx;
		}
	}

	.box {
		padding: 50rpx 0;

		.one {
			padding: 0 50rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.one_left {
				font-weight: bold;


			}

			.one_right {
				width: 250rpx;
			}
		}

		.two {
			padding-top: 20rpx;
			margin-bottom: 150rpx;
			overflow: hidden;

			.two_item {
				padding-left: 20rpx;
			}

			.nomore {
				padding-top: 100rpx;
				width: 100%;
				text-align: center;
				color: #666;
				font-weight: bold;
			}
		}
	}

	/* 对号 */
	.iconfont {
		font-family: "iconfont" !important;
		font-size: 10px;
		color: #FFFFFF;
		font-style: normal;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
	}

	/* 复选框 */
	.fuxuank {
		border: 1px solid #000000;
		border-radius: 50%;
		height: 30rpx;
		width: 30rpx;
		position: absolute;
		left: 4%;
		size: 20rpx;
		top: 3%;
		text-align: center;
		line-height: 30rpx;


	}

	.fuxuankClicks {
		/* border: 1px solid #000000; */
		border-radius: 50%;
		height: 30rpx;
		width: 30rpx;
		position: absolute;
		left: 4%;
		size: 20rpx;
		top: 3%;
		text-align: center;
		line-height: 30rpx;
	}
</style>